<template>
    <view class="container">
        <!-- Info Items -->
        <view class="divide-y divide-gray-100">
            <view class="f f-bt info-items info-avatar">
                <text class="f-col f-c c-3 fs-30">头像</text>
                <view class="f f-c">
                    <image class="avatar-image" :src="user_avatar"></image>
                    <view class="f-col f-c ml-10">
                        <uni-icons type="right" color="#999" size="18"></uni-icons>
                    </view>
                </view>
            </view>
            <view class="f f-bt info-items">
                <text class="c-3 fs-30">姓名</text>
                <view class="f f-c">
                    <view class="f-col f-c t-c">
                        <input
                            type="nickname"
                            class="c-3 fs-30 t-r"
                            v-model="user_name"
                            style="line-height: 30rpx"
                        />
                    </view>
                    <view class="f-col f-c ml-10">
                        <uni-icons type="right" color="#999" size="18"></uni-icons>
                    </view>
                </view>
            </view>
            <view class="f f-bt p30 info-items">
                <text class="c-3 fs-30">性别</text>
                <view class="f f-c">
                    <view class="f-col f-c t-c">
                        <view class="uni-input">{{ sexArray[user_sex - 1] }}</view>
                    </view>
                    <view class="f-col f-end ml-10">
                        <uni-icons type="right" color="#999" size="18"></uni-icons>
                    </view>
                </view>
            </view>
            <view class="f f-bt p30 info-items">
                <text class="c-3 fs-30">出生日期</text>
                <view class="f f-c">
                    <view class="f-col f-c t-c">
                        <text class="c-3 fs-30">{{ birthday }}</text>
                    </view>
                    <view class="f-col f-end ml-10">
                        <uni-icons type="right" color="#999" size="18"></uni-icons>
                    </view>
                </view>
            </view>
            <view class="f f-bt p30 info-items">
                <text class="c-3 fs-30">个人简介</text>
                <view class="f f-c">
                    <view class="f-col f-c t-c">
                        <text class="c-3 fs-30">{{ user_profile }}</text>
                    </view>
                    <view class="f-col f-end ml-10">
                        <uni-icons type="right" color="#999" size="18"></uni-icons>
                    </view>
                </view>
            </view>
        </view>

        <!-- 编辑按钮 -->
        <view class="edit-btn-container">
            <button class="edit-btn" @click="goToEdit">编辑资料</button>
        </view>

        <!-- 退出登录按钮 -->
        <view class="logout-btn-container">
            <button class="logout-btn" @click="handleLogout">退出登录</button>
        </view>
    </view>
</template>

<script>
import { mapState } from 'pinia';
import useUserStore from '@/stores/modules/user';
import _ from 'lodash';
import login from '@/common/login';
import { uploadImage } from '@/api/modules/common';

export default {
    computed: {
        // 使用 mapState 辅助函数将 store 中的状态映射为计算属性
        ...mapState(useUserStore, [
            'user_name',
            'user_avatar',
            'user_sex',
            'user_id',
            'user_birth',
            'user_profile'
        ])
    },
    data() {
        return {
            sexArray: ['男', '女']
        };
    },
    onShow() {
        const user_store = useUserStore();
        if (!_.isEmpty(user_store.token)) return;
        login();
    },
    methods: {
        // 跳转到编辑页面
        goToEdit() {
            uni.navigateTo({
                url: '/pages/user/edit-info'
            });
        },

        // 退出登录
        handleLogout() {
            uni.showModal({
                title: '提示',
                content: '确定要退出登录吗？',
                success: res => {
                    if (res.confirm) {
                        const user_store = useUserStore();
                        user_store.resetUserStore();

                        // 显示退出成功提示
                        uni.showToast({
                            title: '已退出登录',
                            icon: 'success',
                            duration: 2000
                        });

                        // 延迟跳转到登录页或首页
                        setTimeout(() => {
                            uni.reLaunch({
                                url: '/pages/index/index'
                            });
                        }, 1500);
                    }
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.container {
    padding: 20rpx 30rpx;
}

.edit-btn-container {
    display: flex;
    justify-content: center;
    margin-top: 60rpx;
}

.edit-btn {
    background-color: #3b82f6;
    color: #fff;
    font-size: 32rpx;
    padding: 20rpx 0;
    border-radius: 50rpx;
    line-height: 1.5;
    height: auto;
    width: 90%;
}

.logout-btn-container {
    display: flex;
    justify-content: center;
    margin-top: 30rpx;
}

.logout-btn {
    background-color: #ffffff;
    color: #f43f5e;
    font-size: 32rpx;
    padding: 20rpx 0;
    border-radius: 50rpx;
    line-height: 1.5;
    height: auto;
    width: 90%;
    border: 1rpx solid #f43f5e;
}

.unset-btn {
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: none;
}

.info-items {
    border-bottom: 2rpx solid #eee;
    padding: 30rpx 20rpx;
}

.info-avatar {
    padding: 10rpx 20rpx;

    .avatar-image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
    }
}
</style>
